<template>
  <span class="link el-link--info f-mini" @click.stop="handleDelete">删除</span>
</template>

<script>
export default {
  name: 'delete-link',
  props: {
    comment: Object,
  },
  methods: {
    handleDelete() {
      this.$msgbox({
        title: '删除评论',
        message: '确认删除这条评论吗？',
        showCancelButton: true, // 显示取消按钮
        customClass: 'confirm-left',
        confirmButtonText: '确定',
        confirmButtonLoading: false,
        confirmButtonClass: 'el-button--danger',
        cancelButtonText: '取消',
        type: 'warning',
        closeOnClickModal: false, // 不允许通过点击遮罩层关闭
        beforeClose: (action, instance, done) => {
          if (action === 'confirm') {
            Object.assign(instance, {
              confirmButtonLoading: true,
              confirmButtonText: '正在删除...',
            });
            this.$api.comments.delete({
              commentId: this.comment.id,
            }).then(() => {
              this.$message.success('删除成功');
              this.$emit('deleted', this.comment);
            }).catch(() => {})
              .then(() => done());
          } else done();
        },
      });
    },
  },
};
</script>

<style></style>
